<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="报告详情"></dawnBar>
		<view class="page-container">

			<view v-if="success">
				<view v-if="queryData.reportType === 'test'">
					<view class="list">
						<view class="list-item">
							<view
								class="list-head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
								<view class="tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
									<tn-tag class="dawn-tag-sm">{{patientInfo.name || '' }}</tn-tag>
									<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
									<tn-tag class="dawn-tag-sm dawn-tag-sm__1">{{report_detail.NL || '' }}</tn-tag>
									<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
									<tn-tag class="dawn-tag-sm dawn-tag-sm__2">{{report_detail.XB || '' }}</tn-tag>
								</view>
								<view>
									<view class="justify-content-item ">
										<tn-tag backgroundColor="tn-main-gradient-dawn" fontColor="#FFFFFF"
											shape="circleLeft" width="auto">
											{{ report_detail.LX || ''}}
										</tn-tag>
									</view>
								</view>
							</view>
							<view class="list-content tn-flex tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
								<view class="tn-flex tn-flex-nowrap  tn-flex-col-center tn-flex-row-left">
									<view class="tn-padding-left-ss">
										<view class="">
											<text class="dawn-text-md tn-text-bold">{{ report_detail.title }}</text>
										</view>
										<view class="tn-margin-top-ss">
											<text class="dawn-text-sm">科室：{{ report_detail.KS }}</text>
											<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
											<text class="dawn-text-sm">标本号：{{ report_detail.BB }}</text>
											<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
											<text class="dawn-text-sm">床号：{{ report_detail.CH || '-'}}</text>
										</view>

									</view>
								</view>
							</view>

							<view class="dawn-line tn-margin-top-sm"></view>
							<view
								class=" tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
								<view class="justify-content-item tn-text-df">
									<text class="tn-icon-time-fill tn-color-black tn-margin-right-ss"></text>
									<text class="tn-color-black">{{ report_detail.JYRQ }}</text>
								</view>
							</view>
						</view>
					</view>

					<view v-if="report_detail.head">
						<uni-table style="width: 100%;">
							<uni-tr>
								<uni-th width="110">{{ report_detail.head.XMMC }}</uni-th>
								<uni-th width="60">{{ report_detail.head.XMDM }}</uni-th>
								<uni-th width="50">{{ report_detail.head.JG }}</uni-th>
								<uni-th width="50">{{ report_detail.head.DW }}</uni-th>
								<uni-th width="50">{{ report_detail.head.CKZ }}</uni-th>
							</uni-tr>
							<block v-for="(item,index) in report_detail.items" :key="index">
								<uni-tr :class="item.JYJG.includes('↑') || item.JYJG.includes('↓')?'tr-bg-danger':''">
									<uni-td>{{ item.JYXM }}</uni-td>
									<uni-td>{{ item.JYXMYWM }}</uni-td>
									<uni-td :class="item.JYJG.includes('↑') || item.JYJG.includes('↓')?'text-danger':''">{{ item.JYJG }}</uni-td>
									<uni-td>{{ item.DW }}</uni-td>
									<uni-td>{{ item.CK }}</uni-td>
								</uni-tr>
							</block>
						</uni-table>
					</view>

				</view>
				<view v-else>
					<view class="list">
						<view class="list-item">
							<view
								class="list-head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
								<view class="tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
									<tn-tag class="dawn-tag-sm">{{patientInfo.name || '' }}</tn-tag>
									<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
									<tn-tag
										class="dawn-tag-sm dawn-tag-sm__1">{{patientInfo.patientSex || '' }}</tn-tag>
									<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
									<tn-tag
										class="dawn-tag-sm dawn-tag-sm__2">{{patientInfo.patientAge || '' }}</tn-tag>
								</view>
								<view>
									<view class="justify-content-item ">
										<tn-tag backgroundColor="tn-main-gradient-dawn" fontColor="#FFFFFF"
											shape="circleLeft" width="auto">
											{{ report_detail.reprotId || ''}}
										</tn-tag>
									</view>
								</view>
							</view>
							<view class="list-content tn-flex tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
								<view class="tn-flex tn-flex-nowrap  tn-flex-col-center tn-flex-row-left">
									<view class="tn-padding-left-ss">
										<view class="">
											<text class="dawn-text-md tn-text-bold">{{ report_detail.reportName }}</text>
										</view>
										<view class="tn-margin-top-ss">
											<text class="dawn-text-sm">科室：{{ report_detail.orderDeptName }}</text>
											<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
											<text class="dawn-text-sm">医生：{{ report_detail.orderDocName }}</text>
											<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
											<text class="dawn-text-sm">检验者：{{ report_detail.reportDocName }}</text>
										</view>
									</view>
								</view>
							</view>

							<view class="dawn-line tn-margin-top-sm"></view>
							<view
								class=" tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
								<view class="justify-content-item tn-text-df">
									<text class="tn-icon-time-fill tn-color-black tn-margin-right-ss"></text>
									<text class="tn-color-black">{{ report_detail.reportTime }}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="tn-bg-white dawn-shadow tn-padding dawn-radius tn-margin-top-sm">
						<view class="tn-margin-bottom">
							<view class="list__left">
								<text class="list__left__icon tn-icon-bug-fill"></text>
								<view class="list__left__text">结果</view>
							</view>
							<view class="tn-margin-top-sm tn-bg-gray--light"
								style="border-radius: 10rpx;padding: 10rpx 20rpx;">
								{{ report_detail.inspect}}
							</view>
						</view>
						<view class="dawn-line"></view>
						<view class="tn-margin-top">
							<view class="list__left">
								<text class="list__left__icon tn-icon-map-fill"></text>
								<view class="list__left__text">内容</view>
							</view>
							<view class="tn-margin-top-sm tn-bg-gray--light"
								style="border-radius: 10rpx;padding: 10rpx 20rpx;">
								{{ report_detail.inspectFindDiag}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="show">
				<dawnMsg :box="dawnMsgBox" :msg="msg"></dawnMsg>
			</view>

		</view>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as Util from '@/utils/util.js';
	import * as ReportApi from "@/api/hospital/report.js";
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";

	import chs from "@/libs/chs.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'patientInfo']),
		data() {
			return {
				iconSize: 38,
				size: 40,
				loading: false,
				success: false,
				show: false,
				msg: '',
				dawnMsgBox: '',
				queryData: {},
				status: -1,
				report_detail: {}
			}
		},
		async onLoad(options) {
			await this.$onLaunched;
			console.info("order return options");
			console.table(options);
			if (!this.isLogin) {
				toLogin();
				return;
			} else {
				// if (options.hasOwnProperty('params')) {
				// 	this.queryData = JSON.parse(options.params);
				// }
				this.queryData = this.$util.getStorageData(config.STORE_KEY.REPORT_DETAIL);
				this.getData();
			}
		},
		methods: {
			getData: function() {
				let that = this;
				this.loading = true;
				this.show = false;
				this.dawnMsgBox = '';
				this.report_detail = {};
				this.queryData.userId = this.patientInfo.openid;
				this.queryData.patientId = this.patientInfo.patientId;
				this.queryData.patientName = this.patientInfo.name;
				ReportApi.detail(this.queryData).then(res => {
					console.table(res);
					this.loading = false;
					if (res.code === 0) {
						that.success = true;
						if(that.queryData.reportType === 'check'){
							const data = res.data;
							const l = data.body;
							if(l && l.length > 0){
								that.report_detail = l[0];
							}
						}else {
							that.report_detail = res.data;
						}
					} else {
						that.show = true;
						that.msg = res.msg;
					}
				}).catch(err => {
					console.table(err);
					that.loading = false;
					that.show = true;
				})
			},
			handleActionsheet() {
				this.actionsheetVisible = !this.actionsheetVisible;
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			fen2yuan(price) {
				return Util.fen2yuan(price)
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.tr-bg-danger{
		background-color: $dawn-bg-grey;
	}
	.text-danger{
		color: $dawn-color-danger !important;
	}
	::v-deep .uni-table {
	    position: relative;
	    width: 100%;
	    border-radius: 5px;
	    background-color: #fff;
	    box-sizing: border-box;
	    display: table;
	    overflow-x: auto;
	    padding: 10px 5px;
	}
	::v-deep .uni-table-th {
		padding: 3px 3px;
		display: table-cell;
		box-sizing: border-box;
		font-size: 14px;
		font-weight: bold;
		color: #909399;
		border-bottom: 1px $dawn-line-color solid;
	}

	::v-deep .uni-table-td {
		display: table-cell;
		padding: 3px 3px;
		font-size: 14px;
		border-bottom: 1px $dawn-line-color solid;
		font-weight: 400;
		color: #000;
		line-height: 23px;
		box-sizing: border-box;
	}
</style>